<template>
  <a-modal
    :title="title"
    :width="550"
    :visible="visible"
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭"
    wrapClassName="ant-modal-cust-warp"
    style="top:5%;height: 55%;overflow-y: hidden"
  >
    <a-form :form="form">
      <a-row>
        <a-col span="13">
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="任务名称:">{{process.modelName}}</a-form-item>
        </a-col>
        <a-col span="11">
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" >
            <router-link :to="{ path: path }" style="float: right">{{"新建任务流程模板"}}</router-link>
          </a-form-item>
        </a-col>

      </a-row>

      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="选择任务流程模板:">
        <a-select
          v-decorator="[ 'modelId', validatorRules.modelId ]"
          placeholder="请选择"
          @change="modelChanged"
        >
          <a-select-option
            v-for="item in deployedList"
            :key="item.id"
            :value="item.id"
          >{{item.name}}</a-select-option>
        </a-select>
      </a-form-item>
      <show-template ref="ShowTemplate"/>
    </a-form>
  </a-modal>
</template>

<script>
  import { addProcess, allDeployedModel ,flowPlan} from '@/api/activiti'
  import ACol from "ant-design-vue/es/grid/Col";
  import ARow from "ant-design-vue/es/grid/Row";
  import ShowTemplate from './ShowTemplate';
  export default {
    name: "FlowPlan",
    components: {ARow, ACol,ShowTemplate},
    data() {
      return {
        title:"任务流程规划",
        labelCol: {
          xs: {span: 24},
          sm: {span: 7}
        },
        wrapperCol: {
          xs: {span: 24},
          sm: {span: 14}
        },
        deployedList: [],
        idd:"",   //存放模板的id
        visible: false,
        form: this.$form.createForm(this),
        validatorRules: {
          modelId: {
            rules: [{ required: false, message: '请选择任务名称!' }]
          }
        },
        process:{},
        model: {},
        path: '/flow/modelList'
      }
    },
    props:['flowPlanVisible'],
    methods:{
      fetchDeployedModel() {
        const vm = this
        allDeployedModel().then(res => {
          if (res.success) {
            vm.deployedList = [].concat(res.result)
            /*   this.idd=res.result.name
               alert(res.result.name)*/

          }
        })
      },
      add(process) {
        this.visible = true
        this.process = process
        this.form.resetFields()
      },
      handleCancel() {
        this.visible = false
      },
      modelChanged(id) {
        this.model = Object.assign({}, this.deployedList.filter(e => e.id === id)[0])
        this.$refs.ShowTemplate.show(this.model)
      },
      /* showFlowplan(process) {
         this.model = Object.assign({}, this.deployedList.filter(e => e.id === process.modelId)[0])
         this.$refs.ShowTemplate.show(this.model)
       },*/
      handleOk() {
        const that = this
        // 触发表单验证
        this.form.validateFields((err, values) => {
          if (!err) {
            let formData = Object.assign(that.process,values)
            let obj
            console.log(formData)
            if (!this.process.id) {
              obj = flowPlan(formData)
            } else {
              obj = flowPlan(formData)
            }
            obj
              .then(res => {
                if (res.success) {
                  that.$message.success(res.message)
                  that.$emit('ok')
                  that.visible = false
                } else {
                  that.$message.warning(res.message)
                }
              })
              .finally(() => {
                that.visible = false
              })
          }
        })
      }
    },
    created() {
      this.fetchDeployedModel()
    }
  }
</script>

<style scoped>

</style>